<template>
  <Dialog
    :title="t('candidate.defenseTimeDialog.title')"
    v-model="dialogVisible"
    width="500px"
    :fullscreen="false"
  >
    <el-descriptions
      v-if="debateTime?.initialTime || debateTime?.finalTime"
      v-loading="loading"
      :column="1"
      border
      label-width="230"
    >
      <el-descriptions-item
        v-if="debateTime?.initialTime"
        :label="t('candidate.defenseTimeDialog.fields.time')"
      >
        {{ formatDate(debateTime.initialTime) }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="debateTime?.finalTime"
        :label="t('candidate.defenseTimeDialog.fields.time2')"
      >
        {{ formatDate(debateTime.finalTime) }}
      </el-descriptions-item>
    </el-descriptions>
    <el-empty v-loading="loading" v-else :description="t('candidate.defenseTimeDialog.noTime')" />
  </Dialog>
</template>

<script setup lang="ts">
import { AppCandidateDebateTimeVO, AwardApplicationApi } from '@/api/awards/candidate'
import { formatDate } from '@/utils/formatTime'

defineOptions({ name: 'DefenseTimeView' })

const { t } = useI18n()
const dialogVisible = ref(false)
const loading = ref(true) // 加载中

const debateTime = ref<AppCandidateDebateTimeVO>()
// 打开弹窗 id-候选人id
const open = async (id: string) => {
  dialogVisible.value = true
  loading.value = true
  try {
    debateTime.value = await AwardApplicationApi.getAwardDefenceTime(id)
  } finally {
    loading.value = false
  }
}

defineExpose({
  open
})
</script>
